import { useState } from "react";
import { Switch, Input, Tooltip } from "antd";
import { OnOffDesc } from "@/components/render";

interface props {
  customerNote: string; // 客户备注
  setCustomerNote: any; // 设置客户备注
}

const QrCustomerNote = ({ customerNote, setCustomerNote }: props) => {
  const [isLimit, setIsLimit] = useState(false);

  return (
    <div className="flex mb-24">
      <span className="w-106 text-right mr-16">客户备注:</span>
      {/* 开关 */}
      <div>
        <div className="flex items-center mb-12">
          <Switch
            size="small"
            onChange={e => {
              setIsLimit(e);
            }}
            checked={isLimit}
          />
          <OnOffDesc flag={isLimit} desc="开启后可为客户昵称加备注，方便查看客户来源" />
          <Tooltip
            overlayClassName="w-530 max-w-530 p-10 h-340"
            placement="topLeft"
            title={() => {
              return (
                <img
                  className="w-full h-full"
                  alt=""
                  src="https://assets.weibanzhushou.com/web/we-work-webapp/live-code_note-example-img.3da305e0b748.png"
                />
              );
            }}
            color={"#fff"}>
            <span className="text-blue-default cursor-pointer">查看示例</span>
          </Tooltip>
        </div>

        <div className={`w-450 ${isLimit ? "" : "none"}`}>
          <div className="w-full h-36 rounded-sm px-12 mb-16 flex items-center justify-start text-grey-600 border-1 border-solid border-grey-300">
            <span className="mr-10">客户昵称-</span>
            <span className="right-input flex-1 border-l-1 border-solid border-grey-200">
              <Input
                allowClear
                bordered={false}
                onChange={(e: any) => {
                  setCustomerNote(e.target.value);
                }}
                defaultValue={customerNote}
                placeholder="请输入客户备注（备注将展示在客户昵称后）"
              />
            </span>
          </div>
          <div className="view flex items-start justify-start">
            <span className="mr-8">预览:</span>
            <div className="flex justify-start items-center h-50 rounded-sm px-10 border-1 border-solid border-grey-300">
              <img
                alt=""
                src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg"
                className="mr-10 w-34 h34 rounded-2 object-cover"
              />
              <span className="text-grey-400">
                客户昵称- <span className="text-grey-600">{customerNote}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QrCustomerNote;
